<template>
  <div class="box">
    小默商城
    <van-search
      v-model="value"
      shape="round"
      background="#4fc08d"
      placeholder="搜索商品名称"
    />
  </div>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item><img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" alt=""></van-swipe-item>
    <van-swipe-item><img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" alt=""></van-swipe-item>
  </van-swipe>
  <van-card
    v-for="item in data"
    :key="item.id"
    :desc="item.name"
    :title="item.title"
    :thumb="item.url"
    @click="dianji(item)"
    />
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
let router=new useRouter
let data=ref([])
let shuju=async()=>{
  let age=await axios.get('/api/room/list')
  data.value=age.data.data.list
}
let dianji=(v)=>{
  // router.push({
  //   path:'/demo3'+v.id,
  //   query:v,
    
  // })
  router.push('/demo3')
}
shuju()
</script>

<style>
.box {
  height: 100px;
  width: 100%;
  background: #4fc08d;
}
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
  /* background-color: #39a9ed; */
}
img{
    width: 100%;
    height: 150px;
}
</style>